<template>
	<view class="">
		<alltitleVue :title="title" :url="url" />
		<view class="page">
			<view class="base-info bgf">


				<view class="ali-c">
					<text class="item-title">承运来源</text>
					<text class="item-value">{{ info.dvyName }}</text>
				</view>

				<view class="ali-c">
					<text class="item-title">运单编号</text>
					<text class="item-value">{{ info.logisticsNo }}</text>
				</view>

				<view class="ali-c">
					<text class="item-title">发货时间</text>
					<text class="item-value">{{ info.createTime }}</text>
				</view>
			</view>

			<view class="stepper-container">
				<view class="stepper">
					<view class="step" v-for="(item, index) in list" :key="index"
						:class="{'completed': item.status, 'current': index === currentStep}">
						<view class="step-line" :class="{'completed': item.status}"></view>
						<!-- 步骤图标 -->
						<view class="step-icon" :class="{'step-bg':item.status}">
							<image v-if="item.status" class="icon-font" :src="item.completedIcon" mode=""></image>
							<image v-else :src="item.icon" mode=""></image>

						</view>

						<!-- 步骤信息 -->
						<view class="step-info">
							<view class="step-title">{{ item.ftime }}</view>
							<view class="step-description">{{ item.context }}</view>
						</view>


					</view>


				</view>
			</view>
			<emptyData v-if="list.length == 0"></emptyData>
		</view>


	</view>

</template>

<script>
	import {
		kdniao
	} from "@/service/api.js";
	import config from "@/utils/config.js";
	export default {
		data() {
			return {
				title: "",
				//物流信息
				list: [

					{
						ftime: "订单确认",
						context: "确认订单，检查库存"
					},
					{
						ftime: "拣货",
						context: "准备商品并检查",
						status: true
					},
					{
						ftime: "打包",
						context: "包装商品并贴标签"
					},
					{
						ftime: "出库",
						context: "商品交给物流公司"
					},
					{
						ftime: "配送",
						context: "商品运输中"
					},
					{
						ftime: "签收",
						context: "顾客签收商品"
					}
				],
				info: {},

				ossHost: config.ossHost
			}
		},
		onLoad(options) {

			// this.kdniaoInfo(options);
			this.list = this.list.map((item, index) => {
				// 为每个步骤添加对应的图标
				return {
					...item,
					icon: this.getIconForStep(index), // 根据步骤索引或其他逻辑选择图标
					completedIcon: "../../static/home/wan.png", // 完成后的图标
				};
			});


		},
		methods: {
			kdniaoInfo(options) {
				let params = {
					logisticsCompanyId: options.logisticsCompanyId,
					logisticsNo: options.logisticsNo,
					phone: options.phone,
					id: options.id != "null" ? options.id : ""
				};
				kdniao(params).then(res => {
					this.list = res.result.data;
					this.info = res.result.hisOrderDrug;
					this.list.sort((a, b) => {
						return a.ftime < b.ftime ? 1 : -1;
					});
				});
			},
			getIconForStep(index) {
				// 根据步骤的索引选择不同的图标
				const icons = [
					"../../static/home/order.png",
					"../../static/home/cang.png",
					"../../static/home/Pick.png",
					"../../static/home/transport.png",
					"../../static/home/Hand.png",
					"../../static/home/order.png"
				];
				return icons[index] || "../../static/home/order.png"; // 如果没有找到对应的图标，则返回默认的 "❓"
			},

		},
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		height: calc(100vh - 44px);
		font-size: 24rpx;
		background-color: #f6f7f8;
		overflow-y: auto;
	}

	.hander {
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 28rpx;
	}

	.order {
		padding: 20rpx;
		font-size: 28rpx;
	}

	/*flex 转换成flex容器*/
	.flex {
		display: flex;
		flex-direction: row;
	}

	.flex1 {
		flex: 1;
	}

	.ali-c {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.bgf {
		background-color: #fff;
	}

	.base-info {
		margin: 30rpx 20rpx 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: white;

		.base-info-head {
			display: flex;
			flex-direction: row;

			.cover {
				width: 150upx;
				height: 150upx;
				border-radius: 10px;
				margin-bottom: 20upx;
			}

			.info-col {
				margin: 10upx 30upx;
				display: flex;
				flex-direction: column;

				.drug-title {
					color: #333333;
					font-size: 28upx;
				}

				.drug-specs {
					margin-top: 20upx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.specs-name {
						color: #666666;
						font-size: 26upx;
						flex: 1;
					}

					.specs-count {
						color: #333333;
						font-size: 28upx;
					}
				}
			}
		}

		.item-title {
			margin: 15upx 20upx 15upx 0;
			font-size: 28upx;
			color: #666666;
		}

		.item-value {
			font-size: 28upx;
			color: #333333;
		}
	}

	.express {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 30rpx 20rpx 0 20rpx;

		.top {
			padding: 28rpx 40rpx 25rpx 29rpx;

			.text {
				margin-left: 20rpx;

				.text2 {
					font-size: 28rpx;
					color: #000000;
				}
			}
		}

		.right {
			background-color: rgba(8, 175, 254, 0.02);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			padding: 15rpx 30rpx 20rpx 30rpx;

			.text {
				color: #666666;
				font-size: 22rpx;
			}
		}
	}

	.stepper {
		border-radius: 20rpx;
		margin: 0 24rpx;
		background-color: white;
		padding: 24rpx;

		.step {
			display: flex;
			align-items: flex-start;
			position: relative;
			height: 158rpx;

			.step-info {
				margin-left: 15rpx;
			}

			.step-icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: #808080;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}
				.icon-font {
					width: 40rpx;
					height: 40rpx;
				}

			}
			.step-bg{
				background: #fff;
			}

			

			.step-line {
				height: 120rpx;
				width: 4rpx;
				background: antiquewhite;
				position: absolute;
				top: 39rpx;
				left: 18rpx;
			}

		}

		.step:last-child {
			height: auto;

			.step-line:first-child {
				background: #fff;
			}
		}
	}
</style>